<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <t-btn color="primary" label="Basic Menu">
        <t-menu>
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable v-close-popup>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable v-close-popup>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable v-close-popup>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="secondary" label="Auto-Close Menu">
        <t-menu auto-close>
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <div
        class="inline bg-amber rounded-borders cursor-pointer"
        style="max-width: 300px"
      >
        <div class="fit flex flex-center text-center non-selectable q-pa-md">
          I am groot!<br />(Click me! Using touch-position)
        </div>

        <t-menu touch-position>
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>Branches</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>Leaves</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>Roots</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </div>
    </div>
  </div>
</template>
